<template>
  <div class="tab-container">
    <el-row style="margin-bottom: 20px">
      <el-col  :span="4">
        <el-button  style="padding-left:50px;padding-right:50px;height:30px;line-height:0"   type="primary" @click="backChange" plain>返回</el-button>
      </el-col>
    </el-row>
    <div>
      <h2 style="margin-top:30px">学而思教育</h2>
      <!-- <span style="float: left;font-size: 27px;font-weight: 500;margin-right: 10px;">{{educationName}}</span> -->
      <!-- <i @click="$router.push({ name: 'home' })" style="font-size: 35px;" class="el-icon-s-fold fh"></i> -->
    </div>
    <!--<div v-for="(item,index) in tabMapOptions" >-->
      <!--<el-radio style="float:left; margin-left: 20px" v-model="radio1" @change="radiock"  :label="index" border>{{item.label}}{{index}}</el-radio>-->
    <!--</div>-->
    <!--<el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">-->
      <!--<el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">-->
        <!--<keep-alive>-->
          <!--<tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />-->
        <!--</keep-alive>-->
      <!--</el-tab-pane>-->
    <!--</el-tabs>-->
    <el-dropdown style="float:right;margin-left: 10px; color: #0a76a4;z-index: 1000" trigger="click" @command='exclExportChange'>
      <span class="el-dropdown-link" style="color:#1B89F0 ;cursor: pointer;">
       <i class="el-icon-download"></i> 导出<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item icon="el-icon-plus" command="a">导出此页</el-dropdown-item>
        <el-dropdown-item icon="el-icon-plus" command="b">导出全部</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div style="display:flex;padding-top:4px;position: absolute;">
      <!-- 教职 -->
      <div class="point" style="width:125px;padding-left:50px">
        <span v-if="teacherShow" style="background-color:red;width:12px;height:12px;margin-left:50px;border-radius: 50%;display:block;">.</span>
      </div>
      <!-- 课程 -->
      <div class="point" style="width:125px;padding-left:53px">
        <span v-if="courseListShow" style="background-color:red;width:12px;height:12px;margin-left:50px;border-radius: 50%;display:block">.</span>
      </div>
      <!-- 招生广告 -->
      <div class="point" style="width:153px;padding-left:80px">
        <span v-if="admissionsListShow" style="background-color:red;width:12px;height:12px;margin-left:50px;border-radius: 50%;display:block">.</span>
      </div>
      <!-- 班级 -->
      <div class="point"   style="width:125px;padding-left:50px">
        <span v-if="classListShow" style="background-color:red;width:12px;height:12px;margin-left:50px;border-radius: 50%;display:block">.</span>
      </div>
      <!-- 教学进度 -->
      <div class="point" style="width:152px;padding-left:75px">
        <span v-if="teacheringShow" style="background-color:red;width:12px;height:12px;margin-left:50px;border-radius: 50%;display:block">.</span>
      </div>
      <!-- 竞赛 -->
      <div class="point" style="width:125px;padding-left:50px">
        <span v-if="compertitionShow" style="background-color:red;width:12px;height:12px;margin-left:50px;border-radius: 50%;display:block">.</span>
      </div>
    </div>
    <el-tabs  v-model="activeName" type="card"  @tab-click="handleClick">
      <el-tab-pane label="教职信息审批" name="teacher" :key="'teacher'" >
        <teacher :userId='this.$route.params.userId' @teacher="teacher" @val="val"></teacher>
      </el-tab-pane>

      <el-tab-pane label="课程信息审批" name="course" :key="'course'">
        <!-- @valCourse="valCourse" -->
        <course :userId='this.$route.params.userId' @course="course"  @valCourse="valCourse"></course>
      </el-tab-pane>

      <el-tab-pane label="招生广告信息审批" name="advertising" :key="'advertising'">
        <advertising  :userId='this.$route.params.userId' @admissionsList="admissionsList" @valAdvertising="valAdvertising"></advertising>
      </el-tab-pane>

      <el-tab-pane label="班级信息审批" name="classes" :key="'classes'" >
        <classes  :userId='this.$route.params.userId' @classList="classList" @valClass="valClass"></classes>
      </el-tab-pane>

      <el-tab-pane label="教学进度信息审批" name="teaching" :key="'teaching'">
        <teaching :userId='this.$route.params.userId' @teachering="teachering" @valTeaching="valTeaching"></teaching>
      </el-tab-pane>

      <el-tab-pane label="竞赛信息审批" name="competition" :key="'competition'">
        <competition :userId='this.$route.params.userId' @compertition="compertition" @valCoperation="valCoperation"></competition>
      </el-tab-pane>

      <!-- <el-tab-pane label="绿色培训审批" name="train" :key="'train'">
        <train></train>
      </el-tab-pane>

      <el-tab-pane label="托管服务审批" name="trusteeship" :key="'trusteeship'">
        <trusteeship></trusteeship>
      </el-tab-pane> -->

      <el-tab-pane label="学员统计" name="student" :key="'student'">
        <student :userId='this.$route.params.userId'  @valStudent="valStudent"></student>
      </el-tab-pane>
      <!--<el-tab-pane label="tab2" name="second" :key="'second'">-->
        <!--<child2></child2>-->
      <!--</el-tab-pane>-->
    </el-tabs>

  </div>
</template>
<script>
//  const { export_json_to_excel } = require('@/vendor/Export2Excel')
  import teacher from './teacher/index'
  import course from './course/index'
  import advertising from './advertising/index'
  import classes from './classes/index'
  import teaching from './teaching/index'
  import competition from './competition/index'
  import student from './student/index'
  import trusteeship from './trusteeship/index'
  import train from './train/index'
  import export_table_to_excel from '@/vendor/Export2Excel'
  export default {
    components: { teacher,course,advertising,classes,teaching,competition,student,trusteeship,train },
    data() {
      return {
        activeName: 'teacher',
        educationName:'',
        // 前面待审批项  已全部审批项tab选择想下标
        updateStatus:'',
        // 教职显示红点
        teacherShow:false,
        // 教职条数
        teacherVal:'',
        // 课程显示红点
        courseListShow:false,
        // 课程条数
        courseListVal:'',
        // 招生广告
        admissionsListShow:false,
        // 招生条数
        admissionsListVal:'',
        // 班级显示红点
        classListShow:false,
        // 班级条数
        classListVal:'',
        // 教学进度显示红点
        teacheringShow:false,
        // 教学进度条数
        teacheringVal:'',
        // 竞赛显示红点
        compertitionShow:false,
        // 竞赛条数
        compertitionVal:'',
        // 学员显示红点
        statudentShow:false,
        // 学员条数
        statudentVal:'',
        
        // tabMapOptions: [
        //   { label: '教职信息审批', key: 'teacher' },
        //   { label: '课程信息审批', key: 'course' },
        //   { label: '招生广告信息审批', key: 'advertising' },
        //   { label: '班级信息审批', key: 'classes' },
        //   { label: '教学进度信息审批', key: 'teaching' },
        //   { label: '竞赛信息审批', key: 'competition' },
        //   { label: '绿色培训审批', key: 'train' },
        //   { label: '托管服务审批', key: 'trusteeship' },
        //   { label: '学员统计', key: 'student' },
        // ],
      }
    },
    created() {
      this.activeName = this.$route.params.id
      this.educationName = this.$route.params.name
      this.updateStatus=this.$route.params.updateStatus
      console.log('获取刚开始的点数据',this.teacherListData,this.courseListData )
    },
    methods: {
      // 获取教职审批子组件传递过来的数据列表
      teacher(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.teacherShow=true
        }else{
          // 否则不显示红点
          this.teacherShow=false
        }
      },
      // 获取教职信息列表的条数变化
      val(val){
        this.teacherVal=val
        console.log('获取最终子组件传递过来的教职条数变化',val)
      },
      // 获取课程信息列表条数变化
      valCourse(val){
        this.courseListVal=val
        console.log('获取最终课程子组件传递过来的课程条数变化',val)
      },
      // 学员信息列表条数变化
      valStudent(val){
        this.statudentVal=val
        console.log('获取最终学员子组件传递过来的课程条数变化',val)
      },
      // 竞赛信息列表条数变化
      valCoperation(val){
        this.compertitionVal=val
        console.log('获取最终竞赛子组件传递过来的课程条数变化',val)
      },
      // 教学进度列表条数变化
      valTeaching(val){
        this.teacheringVal=val
        console.log('获取最终教学进度子组件传递过来的课程条数变化',val)
      },
      // 班级信息列表条数变化
      valClass(val){
        this.classListVal=val
        console.log('获取最终班级子组件传递过来的课程条数变化',val)
      },
      // 招生广告
      valAdvertising(val){
        this.admissionsListVal=val
        console.log('获取最终招生广告子组件传递过来的课程条数变化',val)
      },
      // 获取课程审批子组件传递过来的数据列表
      course(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.courseListShow=true
        }else{
          // 否则不显示红点
          this.courseListShow=false
        }
      },
      // 获取招生广告传递子组件传递过来的数据列表
      admissionsList(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.admissionsListShow=true
        }else{
          // 否则不显示红点
          this.admissionsListShow=false
        }
      },
      // 获取班级审批子组件传递过来的数据列表
      classList(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.classListShow=true
        }else{
          // 否则不显示红点
          this.classListShow=false
        }
      },
      // 获取教学进度子组件传递过来的数据列表
      teachering(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.teacheringShow=true
        }else{
          // 否则不显示红点
          this.teacheringShow=false
        }
      },
      // 获取竞赛子组件传递过来的数据列表
      compertition(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.compertitionShow=true
        }else{
          // 否则不显示红点
          this.compertitionShow=false
        }
      },
      // 获取学院统计子组件传递过来的数据列表
      student(data,e){
        if(data==0 && e.length){
          // 如果数组长度有值，显示红点
          this.statudentShow=true
        }else{
          // 否则不显示红点
          this.statudentShow=false
        }
      },
      // 机构信息导航栏切换事件
      handleClick(tab, event) {
        console.log('获取你',this.activeName)
      },
         // 导出此页
      exclExportChange(command){
        console.log('获取选择',command)
        // 导出机构入驻审批列表
        if(this.activeName=='teacher'){
          if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#teacher','教职信息审批')
          }else {
            if(this.teacherVal==500){
              export_table_to_excel('#teacher','教职信息审批')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }else if(this.activeName=='course'){
           if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#course','课程信息审批')
          }else {
            if(this.courseListVal==500){
              export_table_to_excel('#course','课程信息审批')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }else if(this.activeName=='advertising'){
           if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#advertising','招生广告信息审批')
          }else {
            if(this.admissionsListVal==500){
              export_table_to_excel('#advertising','招生广告信息审批')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }else if(this.activeName=='classes'){
          if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#classes','班级信息审批')
          }else {
            if(this.classListVal==500){
              export_table_to_excel('#classes','班级信息审批')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }else if(this.activeName=='teaching'){
          if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#teaching','教学进度信息审批')
          }else {
            if(this.teacheringVal==500){
              export_table_to_excel('#teaching','教学进度信息审批')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }else if(this.activeName=='competition'){
          if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#competition','竞赛信息审批')
          }else {
            if(this.compertitionVal==500){
              export_table_to_excel('#competition','竞赛信息审批')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }else {
          if(command=='a'){
            // 点击的是导出此页
            // 导出机构入驻审批列表
            export_table_to_excel('#student','学员统计')
          }else {
            if(this.statudentVal==500){
              export_table_to_excel('#student','学员统计')
            }else {
              this.$message.error('请先将页数调制每页500条后,再导出')
            }
          }
        }
      },
      // 返回
      backChange(){
        this.$router.push({ name: 'home', params: {tabStatus: this.updateStatus}})
      },
      radiock(data){
        console.log(data)
      },
    }
  }
</script>

<style scoped>
  .tab-container {
  }
  .fh:hover{
    cursor:pointer

  }
  .el-tabs__item{
    border: 1px solid red;
  }
</style>
